<template>
  <div>
    首页
    <p id="p1" @click="addCount">count:{{count}}</p>
    <p @click="addAge">{{user.name}}--{{user.age}}</p>

    <ul>
      <li v-for='item in nameArr'>
          {{item}}
      </li>
    </ul>
     <!-- <p v-if='boolean'>测试boolean</p> -->
    <!-- <p @click="editstr">str:{{str}}</p> -->
  </div>
</template>
<script setup>
// 定义响应式数据api=> ref;
// ref 可以定义任意数据, ref 使用object.defineProperty, ref处理引用数据的时候, 也是用Proxy
// reactive只能定义引用数据  使用的是proxy 代理实现响应式


import {ref,reactive,nextTick} from 'vue';

const count = ref(0);
const addCount = ()=>{
   count.value++;
    // console.log(count);
    // dom 的更新是异步的 ,要想获取最新的dom 使用nextTick
    nextTick(()=>{
      console.log(document.querySelector('#p1').innerHTML);
    })

    setTimeout(()=>{
      console.log(document.querySelector('#p1').innerHTML);
    },0)
   
}


const user = reactive({
    name:'李逵',
    age:50
})
// console.log('user',user);
const addAge = ()=>{
  user.age++
};
const nameArr = ref(['魔力红','魔力青','魔礼寿','魔礼海']);
// console.log('nameArr',nameArr);

//
// const boolean = reactive(true);
// console.log('boolean',boolean);
// let str = ref('周一做模拟面试,各位同学准备纸质简历')
// const editstr = ()=>{
//     str.value= '呵呵呵呵'
// }

</script>
